const  settingsBtn = document.querySelector('#settings-btn')
const settings = document.querySelector('#settings')
const settingsForm = document.querySelector('#settings-form')
const difficultySelect = document.querySelector('#difficulty')
const word = document.querySelector('#word')
const text = document.querySelector('#text')
const timeEl = document.querySelector('#time')
const scoreEl = document.querySelector('#score')
const endGameEl = document.querySelector('#end-game-container')


// 设置单词
const words = [
    'sigh',
    'tense',
    'airplane',
    'ball',
    'pies',
    'juice',
    'warlike',
    'bad',
    'north',
    'dependent',
    'steer',
    'silver',
    'highfalutin',
    'superficial',
    'quince',
    'eight',
    'feeble',
    'admit',
    'drag',
    'loving'
];

// 设置随机单词组
let randowWord;

//设置分数
let score = 0;

// 设置初始时间
let time = 10;

// 获取选择的难度  默认为 中等
let difficulty = localStorage.getItem('difficulty') !== null ? localStorage.getItem('difficulty') : 'medium'

// 设置下拉列表的 值
difficultySelect.value = localStorage.getItem('difficulty') !== null ? localStorage.getItem('difficulty') : 'medium'

// 获得文本框光标
text.focus()

// 设置 时间定时器  单位 为 1000毫秒
const timeInterval = setInterval(updateTime, 1000)

// 设置随机 单词组函数
function getRandomWord() {
    return words[Math.floor(Math.random() * words.length)];
}

// 将获取的随机 单词组 赋值给 dom
function addWordToDOM() {
    randomWord = getRandomWord();
    word.innerHTML = randomWord;
}

// 成绩累加
function updateScore() {
    score++;
    scoreEl.innerHTML = score;
}

// 时间累加
function updateTime() {
    time--;
    timeEl.innerHTML = time + 's';

    if (time === 0) {
        // 清除定时器
        clearInterval(timeInterval);
        // 游戏结束
        gameOver()
    }
}

// 游戏结束 显示 dow {得分, 页面重加载}
function gameOver() {
    endGameEl.innerHTML = `
        <h1>时间到了</h1>
        <p>你的得分是${score}</p>
        <button onclick="location.reload()">再试一次</button>
    `
    endGameEl.style.display = 'flex';
}
// 重新刷新一次单词
addWordToDOM();


// 判断难度等级 给不同等级 添加不同的时间
function grade() {
    
}


// 给输入的单词难度监听事件
text.addEventListener('input', e => {
    // 键入的单词 等于 文本框对象的 值
    const enterText = e.target.value;
    // 判断 输入的值 是否 等于 随机的单词
    if (enterText === randomWord) {
        // 等于就再次生成 一个单词
        addWordToDOM();
        // 得分 加一
        updateScore();
        
        // 清空 input 框
        e.target.value = '';
        
        if (difficulty === 'hard') {
            time += 2;
            
        } else if (difficulty === 'medium') {
            time += 3;
            
        } else {
            time += 5;
            
        }

        // 刷新一次时间
        updateTime();
    } 
})



// 给设置按钮 添加 切换事件 显示 出 难度选择
settingsBtn.addEventListener('click', () => settings.classList.toggle('hide'));

// 给下拉列表 添加事件监听
settingsForm.addEventListener('change', e => {
    difficulty = e.target.value;
    // 将 难度 存储
    localStorage.setItem('difficulty', difficulty)
})